<template>
    <div class="coo-list-wrap">
        <div class="panel">
            <el-form :inline="true" class="filter-form" style="">
                <div class="form-content">
                    <el-form-item label="选择主机">
                        <el-select v-model="queryParams.publication_type" placeholder="请选择主机" clearable>
                            <el-option v-for="(val, key) in typeList" :key="key" :label="val" :value="key" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择时间">
                        <el-date-picker
                            v-model="queryParams.publication_date_start"
                            type="month"
                            value-format="yyyy-MM"
                            placeholder="开始日期"
                        />
                        <el-date-picker
                            v-model="queryParams.publication_date_end"
                            type="month"
                            value-format="yyyy-MM"
                            placeholder="结束日期"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" plain>5分钟</el-button>
                        <el-button type="info" plain>15分钟</el-button>
                        <el-button type="info" plain>30分钟</el-button>
                        <el-button type="info" plain>1小时</el-button>
                        <el-button type="info" plain>2小时</el-button>
                    </el-form-item>
                </div>
                <div>
                    <el-button @click="resetFilterForm()">重置</el-button>
                    <el-button type="primary" @click="getList(1)">查询</el-button>
                </div>
            </el-form>
        </div>
        <div class="panel flex-column table-container" >
            <el-row :gutter="24">
                <el-col :span="4">
                    <div class="info-box" >
                        <div class="title">服务器总数</div>
                        <div class="content" style="color: #409EFF">2</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="info-box" >
                        <div class="title">CPU核心数</div>
                        <div class="content" style="color: rgb(224, 127, 128)">8</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="info-box" >
                        <div class="title">内存总数</div>
                        <div class="content" style="color: rgb(77,195,21)">15.28GB</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="info-box" >
                        <div class="title">CPU总使用率</div>
                        <div class="content progress"><el-progress type="dashboard" color="#e6a23c" :percentage="7" width="100" stroke-width=14></el-progress></div>
                        
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="info-box" >
                        <div class="title">内存总使用率</div>
                        <div class="content progress"><el-progress type="dashboard" color="#5cb87a" :percentage="67" width="100" stroke-width=14></el-progress></div>
                        
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="info-box" >
                        <div class="title">根分区总使用率</div>
                        <div class="content progress"><el-progress type="dashboard" color="#f56c6c" :percentage="13" width="100" stroke-width=14></el-progress></div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <div class="graph ">
                        <div class="title">QPS</div>
                        <div ref="inquireRef" class="ammo-content"></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="graph ">
                        <div class="title">事物响应时间（ms）</div>
                        <div ref="objectRef" class="ammo-content"></div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-top:20px">
                <el-col :span="12">
                    <div class="graph">
                        <div class="title">CPU使用率（%）</div>
                        <div ref="cpuRef" class="ammo-content"></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="graph ">
                        <div class="title">内存使用率（%）</div>
                        <div ref="storeRef" class="ammo-content"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    data: function() {
        return {
            queryParams: {

            },
            typeList: {
                10: "all",
                20: "主机1",
                30: "主机2",
            },
            ammoData: null,
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            this.getCPU();
            this.getStore();
            this.getInquire();
            this.getObject();
        },
        getStore() {
            const xAxis = ["10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49",]
            const data = [72.6,72.9,73.5,73.6,73.3,73.5,73.3,73.8,73.72,73.73,74.5,73.9,72.5,72.1,73.9,73.6,73.7,72.8,72.5,73.4,73.1,73.6,73.4,73.3,72.5,72.3,72.3,72.5,73.7,72.2,73.4,73.2,73.6,73.7,73.6,73.1,73.2,73.3,73.7,73.1,72.1,72.4,72.9,72.8,73.7,72.3,72.1,73.7,72.5,72.0]
            this.initStore(xAxis, data);
        },
        getCPU() {
            const xAxis = ["10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49",]
            const data = [11.6,12.9,13.5,8.6,7.3,8.5,7.3,6.8,9.2,13.0,24.5,13.9,11.5,11.1,25.9,20.6,13.7,12.8,8.5,9.4,7.1,10.6,8.4,9.3,8.5,7.3,8.3,12.5,10.7,8.2,4.4,7.2,10.6,10.7,6.6,9.1,9.2,11.3,10.7,13.1,11.1,6.4,6.9,8.8,7.7,8.3,11.1,5.7,5.5,6.0]
            this.initCPU(xAxis, data);
        },
        getInquire() {
            const xAxis = ["10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49",]
            const data = [172.6,168.9,173.5,373.6,73.3,73.5,73.3,73.8,73.72,173.73,172.6,168.9,173.5,373.6,73.3,73.5,73.3,73.8,73.72,173.73,172.6,168.9,173.5,373.6,73.3,73.5,73.3,73.8,73.72,173.73,172.6,168.9,173.5,373.6,73.3,73.5,73.3,73.8,73.72,173.73,172.6,168.9,173.5,373.6,73.3,73.5,73.3,73.8,73.72,173.73]
            this.initInquire(xAxis, data);
        },
        getObject() {
            const xAxis = ["10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49",]
            const data = [49,32,10,98,94,97,87,68,43,49,49,32,10,98,94,97,87,68,43,49,49,32,10,98,94,97,87,68,43,49,49,32,10,98,94,97,87,68,43,49,49,32,10,98,94,97,87,68,43,49]
            this.initObject(xAxis, data);
        },
        initInquire(xAxis, data) {
            //显示折线图
            console.log(xAxis)
            console.log(data)
            const myChart = echarts.init(this.$refs.inquireRef);
            myChart.setOption({
                xAxis: {
                    type: "category",
                    data: xAxis,
                    boundaryGap: false,
                },
                yAxis: {
                    // name: '保单数（单）', //纵坐标名称
                    type: 'value'
                },
                grid: {
                    top: 40,
                    left: 20,
                    right: 10,
                    bottom: 0,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                series: [{
                    data: data,
                    type: "line",
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: "#F56C6C"},
                                {offset: 0.5, color: "rgb(231, 186, 186)"},
                                {offset: 1, color: "rgb(218, 194, 194)"}
                            ],
                        },
                        width: 1.5,
                    },
                    smooth: false,
                    symbol: "none" , // 每个点的形状
                    // symbolSize: 5,
                    color:"#F56C6C",
                }]
            });
            console.log(myChart)
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
        initObject(xAxis, data) {
            //显示折线图
            console.log(xAxis)
            console.log(data)
            const myChart = echarts.init(this.$refs.objectRef);
            myChart.setOption({
                xAxis: {
                    type: "category",
                    data: xAxis,
                    boundaryGap: false,
                },
                yAxis: {
                    // name: '保单数（单）', //纵坐标名称
                    type: 'value'
                },
                grid: {
                    top: 40,
                    left: 20,
                    right: 10,
                    bottom: 0,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                series: [{
                    data: data,
                    type: "line",
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: "#409EFF"},
                                {offset: 0.5, color: "rgb(121, 187, 255)"},
                                {offset: 1, color: "rgb(198, 226, 225)"}
                            ],
                        },
                        width: 1.5,
                    },
                    smooth: false,
                    symbol: "none" , // 每个点的形状
                    // symbolSize: 5,
                    color:"#409EFF",
                }]
            });
            console.log(myChart)
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
        initStore(xAxis, data) {
            //显示折线图
            console.log(xAxis)
            console.log(data)
            const myChart = echarts.init(this.$refs.storeRef);
            myChart.setOption({
                xAxis: {
                    type: "category",
                    data: xAxis,
                    boundaryGap: false,
                },
                yAxis: {
                    // name: '保单数（单）', //纵坐标名称
                    type: 'value'
                },
                grid: {
                    top: 40,
                    left: 20,
                    right: 10,
                    bottom: 0,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                series: [{
                    data: data,
                    type: "line",
                    lineStyle: {
                        color: "rgb(77,195,21)",
                        width: 1,
                    },
                    areaStyle: {
                        color: "rgb(237,249,232)"
                    },
                    smooth: false,
                    symbol: "none" , // 每个点的形状
                    // symbolSize: 5,
                    color:"rgb(77,195,21)",
                }]
            });
            console.log(myChart)
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
        initCPU(xAxis, data) {
            //显示折线图
            console.log(xAxis)
            console.log(data)
            const myChart = echarts.init(this.$refs.cpuRef);
            myChart.setOption({
                xAxis: {
                    type: "category",
                    data: xAxis,
                    boundaryGap: false,
                },
                yAxis: {
                    // name: '保单数（单）', //纵坐标名称
                    type: 'value'
                },
                grid: {
                    top: 40,
                    left: 20,
                    right: 10,
                    bottom: 0,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                series: [{
                    data: data,
                    type: "line",
                    lineStyle: {
                        color: "rgb(249,169,6)",
                        width: 1,
                    },
                    areaStyle: {
                        color: "rgb(253,248,235)"
                    },
                    smooth: false,
                    symbol: "none" , // 每个点的形状
                    // symbolSize: 5,
                    color:"rgb(249,169,6)",
                }]
            });
            console.log(myChart)
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
    },
}
</script>

<style lang="less" scoped>
@import "~@/assets/css/scrollbar.css";
.coo-list-wrap {
	height: 100%;
	width: 100%;
    position: relative;
	.status {
		color: #c0ccda;
		margin-right: 8px;
		&.active {
			color: #13ce66;
		}
	}
    .table-container {
        margin-top:20px;
    }
	.panel {
		box-shadow: 0 0 5px #ebe7e7;
        background-color: #fff;
		padding: 20px;
	}
	.filter-form {
		display: flex;
		align-items: center;
		.form-content {
			flex: 1;
			margin-right: 20px;
			margin-top: -6px;
			margin-bottom: -6px;
		}
	}
	::v-deep {
		.filter-form {
			.el-form-item {
				margin-bottom: 0;
				padding-top: 6px;
				padding-bottom: 6px;
                height: 32px;
			}
			.el-form-item__label {
				font-size: 12px;
				font-weight: normal;
                
			}
            .el-input--suffix .el-input__inner {
                height: 32px;
            }
        }
	}
}
.info-box {
    border: 1px solid rgb(230, 227, 227);
    border-radius: 5px;
    height: 160px;
    margin-bottom: 20px;
    .title {
        display: flex;
        justify-content: center;
        color: #606266;
        font-size: 16px;
        padding: 20px 0 10px 0;
    }
    .content {
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
        font-size: 28px;
        font-weight: 800;
        padding: 25px 0 10px 0;
    }
    .progress {
        padding: 5px 0 10px 0;
    }
}
.graph {
    border: 1px solid rgb(230, 227, 227);
    border-radius: 5px;
    .title {
        display: flex;
        justify-content: center;
        color: #606266;
        font-size: 16px;
        padding: 20px 0 10px 0;
    }
    .ammo-content {
        height: 210px;
        width: 94%;
        margin: -20px 10px 20px 10px;
    }
}
.el-button {
    border-radius: 16px;
    font-size: 12px;
    padding: 9px 15px;
    &.el-button--primary.is-plain{
        color: #409EFF;
        background: #E9F2FF;
        border: 1px solid #C4E1FF;
    }
    &.el-button--danger.is-plain{
        color: #FF9D9D;
        background: #FDEEEE;
        border: 1px solid #FFD4D4;
    }
}
</style>